<template>
    <!-- d:\applet\byteApplet\dy-wallpaper-applet-2\pages\apply\apply.ttml -->

    <view>
        <form @submit="formSubmit">
			<view class="cu-form-group">
			    <view class="title">收款方式</view>
				<view class="" style="width: 265px;">
					<button  class="cu-btn  lines-blue my-button" :class="payType == 1 ? 'lines-blue' : 'lines-gray'" 
					data-paytype="1" @click="clickType">银行卡</button>
					<button  class="cu-btn " :class="payType == 2 ? 'lines-blue' : 'lines-gray'" 
					data-paytype="2" @click="clickType">支付宝</button>
				</view>
			</view>
			<view class="cu-form-group" style="display: none;">
			    <view class="title">真实姓名</view>
			     <input name="payType" :value="payType" maxlength="20" />
			</view>
            <view class="cu-form-group">
                <view class="title">真实姓名</view>
                <input placeholder="请输入真实姓名" name="fullName" :value="fullName" maxlength="20" />
            </view>
            <view class="cu-form-group">
                <view class="title">身份证号</view>
                <input type="idcard" placeholder="请输入身份证号"name="idCard" :value="idCard" maxlength="20"  />
            </view>

            <view class="cu-form-group" v-if="payType == 1">
                <view class="title">银行卡号</view>
                <input placeholder="请输入银行卡号" name="account" :value="account"  />
            </view>
			<view class="cu-form-group" v-if="payType == 1">
			    <view class="title">银行名称</view>
			    <input placeholder="请输入银行名称" name="backName" :value="backName"  />
			</view>
			
			<view class="cu-form-group" v-if="payType == 2">
			    <view class="title">支付宝账号</view>
			    <input placeholder="请输入支付宝账号" name="account" :value="account" maxlength="50" />
				<text class='cuIcon-info text-gray' @click="tishi"></text>
			</view>

            <view class="cu-form-group">
                <view class="title">预留电话</view>
                <input type="number" placeholder="请输入预留电话" name="resMobile" :value="resMobile" maxlength="11" @input="phoneInput"/>
            </view>
            <view class="cu-form-group">
            </view>
			
			<view class="line" style="margin-left: 10px;margin-top: 20px;">
				<jiuaiCheckbox @change="changeBox" :borderStyle="checked ? '1px solid #5571DD' : '1px solid #d1d1d1'" :value="checked"></jiuaiCheckbox>
				<text style="margin-left: 5px;" >
					我已阅读并同意</text>
				<text style="color: #0081FF;" @click="creator">《创作者协议》</text>
				<text>及</text>
				<text style="color: #0081FF;"  @click="yinsiClick">《隐私协议》</text>
				<text>承诺已阅读并同意遵守</text>
				<text style="color: #0081FF;"  @click="userClick">《用户协议》</text>
				<text>按照协议内容提供合法合规服务。</text>
			</view>
			
            <view class="padding flex flex-direction">
                <button class="cu-btn bg-blue margin-tb-sm lg round guoshao-bg" formType="submit">确定添加</button>
            </view>
			
        </form>
    </view>
</template>

<script>

import jiuaiCheckbox from "@/components/jiuai-checkbox/jiuai-checkbox.vue";
const http = require('../../utils/http.js');


var interval = null;

export default {
   components: {
       
		jiuaiCheckbox
   },
    data() {
        return {
			payType : 1,
            fullName: '',
            idCard: '',
            account: '',
            resMobile: '',
			backName:'',
			request:false,
			checked:false
        };
    },
    onLoad: function (options) {
		
	},
    onShow: function () {
		
	},
	onShareAppMessage: function () {
	   
	},
    methods: {
		creator:function(){
			uni.navigateTo({
				url:'/pages/about/creAgreement'
			})
		},
		yinsiClick:function(){
			uni.navigateTo({
				url:'/pages/about/policy'
			})
		},
		userClick:function(){
			uni.navigateTo({
				url:'/pages/about/agreement'
			})
		},
		changeBox(e){//选中切换事件(由组件发起)
			let checked = e.detail.checked; 
			this.setData({
			    checked: checked
			});
		},
		clickType:function(e){
			this.payType = e.currentTarget.dataset.paytype;
			this.account = null;
			if(this.payType == 2){
				this.bankName = null;
			}
		},
		tishi:function(){
			uni.showModal({
				title:'提示',
				content:'支付宝账号可在支付宝APP-我的-姓名下方查看。',
				confirmText:'确定',
				showCancel:false
			})
		},
		
        phoneInput: function (e) {
            this.setData({
                resMobile: e.detail.value
            });
        },

        formSubmit: function (event) {
			
            let that = this;
			if(that.request){
				return;
			}
            that.setData(event.detail.value);
			event.detail.payType = that.payType;
            if (!that.checkdForm()) {
                return;
            }
			this.request = true;
			
            uni.showLoading({
                title: '提交中'
            });
			
			var params = {
			    url: '/u/collection/addInfo',
			    method: 'POST',
				baseUrl:true,
			    data: event.detail.value,
			    callBack: function (res) {
			        uni.hideLoading();
			        if (res.code == 200) {
			            uni.showToast({
			                title: '添加成功',
			                duration: 2000,
							icon: 'none',
							success() {
								setTimeout(function(){
									let pages = getCurrentPages(); // 获取所有页面栈实例列表
									let beforePage = pages[pages.length - 2]; // 上一页
									beforePage.$vm.loadData();
									uni.navigateBack({
										
									})
									
								},1000)
							}
			            });
			        } else {
			            uni.showToast({
			                title: res.msg,
			                duration: 2000,
			                icon: 'none'
			            });
			        }
					that.request = false;
			    }
			};
			http.request(params);
			
        },

        checkdForm: function () {
            let that = this;

            if (that.fullName == '') {
                uni.showToast({
                    title: '请输入真实姓名',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            }

            if (that.idCard == '') {
                uni.showToast({
                    title: '请输入身份证号',
                    icon: 'none',
                    duration: 1000
                });
                return false;
            }
			
			if (that.account == '') {
				let msg = '请输入银行卡号';
				if(that.payType == 2){
					msg = '请输入支付宝账号';
				}
			    uni.showToast({
			        title: msg,
			        icon: 'none',
			        duration: 1000
			    });
			    return false;
			}
			
			if (that.resMobile == '') {
			    uni.showToast({
			        title: '请输入预留电话',
			        icon: 'none',
			        duration: 1000
			    });
			    return false;
			}
			
			if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(that.resMobile)) {
				uni.showToast({ title: '预留电话输入有误', icon: 'none' });
				return;
			}
			if(!that.checked){
				uni.showToast({
				    title: '请阅读以下协议',
				    icon: 'none',
				    duration: 1000
				});
				return false;
			}

            return true;
        }
    }
};
</script>
<style>
@import './addCollection.css';
</style>
